{% extends 'tasks/base.html' %}

{% block title %}导出任务{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="bi bi-download"></i> 导出任务数据</h5>
                </div>
                <div class="card-body">
                    <form id="exportForm" method="get" action="{% url 'export-tasks' %}" class="row g-3">
                        <!-- 导出格式选择 -->
                        <div class="col-md-12 mb-3">
                            <label class="form-label fw-bold">选择导出格式</label>
                            <div class="d-flex gap-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="format" id="formatCSV" value="csv" checked>
                                    <label class="form-check-label" for="formatCSV">
                                        <i class="bi bi-filetype-csv"></i> CSV
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="format" id="formatExcel" value="excel">
                                    <label class="form-check-label" for="formatExcel">
                                        <i class="bi bi-file-earmark-excel"></i> Excel
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="format" id="formatPDF" value="pdf">
                                    <label class="form-check-label" for="formatPDF">
                                        <i class="bi bi-file-earmark-pdf"></i> PDF
                                    </label>
                                </div>
                            </div>
                        </div>
                        
                        <hr>
                        
                        <!-- 筛选条件 -->
                        <div class="col-md-12 mb-3">
                            <label class="form-label fw-bold">筛选条件（可选）</label>
                            <div class="alert alert-info">
                                <i class="bi bi-info-circle"></i> 您可以设置筛选条件来导出特定的任务数据。如果不设置筛选条件，将导出所有任务。
                            </div>
                        </div>
                        
                        <!-- 任务状态 -->
                        <div class="col-md-4">
                            <label for="status" class="form-label">任务状态</label>
                            <select class="form-select" id="status" name="status">
                                <option value="">-- 所有状态 --</option>
                                <option value="todo">待办</option>
                                <option value="in_progress">进行中</option>
                                <option value="done">已完成</option>
                            </select>
                        </div>
                        
                        <!-- 项目 -->
                        <div class="col-md-4">
                            <label for="project" class="form-label">项目</label>
                            <select class="form-select" id="project" name="project">
                                <option value="">-- 所有项目 --</option>
                                {% for project in projects %}
                                    <option value="{{ project }}">{{ project }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        
                        <!-- 系统 -->
                        <div class="col-md-4">
                            <label for="system" class="form-label">系统</label>
                            <select class="form-select" id="system" name="system">
                                <option value="">-- 所有系统 --</option>
                                {% for system in systems %}
                                    <option value="{{ system }}">{{ system }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        
                        <!-- 测试负责人 -->
                        <div class="col-md-4">
                            <label for="test_engineer" class="form-label">测试负责人</label>
                            <select class="form-select" id="test_engineer" name="test_engineer">
                                <option value="">-- 所有测试负责人 --</option>
                                {% for engineer in test_engineers %}
                                    <option value="{{ engineer }}">{{ engineer }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        
                        <!-- 开发负责人 -->
                        <div class="col-md-4">
                            <label for="dev_engineer" class="form-label">开发负责人</label>
                            <select class="form-select" id="dev_engineer" name="dev_engineer">
                                <option value="">-- 所有开发负责人 --</option>
                                {% for engineer in dev_engineers %}
                                    <option value="{{ engineer }}">{{ engineer }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        
                        <!-- 项目经理 -->
                        <div class="col-md-4">
                            <label for="project_manager" class="form-label">项目经理</label>
                            <select class="form-select" id="project_manager" name="project_manager">
                                <option value="">-- 所有项目经理 --</option>
                                {% for manager in project_managers %}
                                    <option value="{{ manager }}">{{ manager }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        
                        <!-- 产品经理 -->
                        <div class="col-md-4">
                            <label for="product_manager" class="form-label">产品经理</label>
                            <select class="form-select" id="product_manager" name="product_manager">
                                <option value="">-- 所有产品经理 --</option>
                                {% for manager in product_managers %}
                                    <option value="{{ manager }}">{{ manager }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        
                        <div class="col-12 d-flex justify-content-between mt-4">
                            <a href="{% url 'task-list' %}" class="btn btn-secondary">
                                <i class="bi bi-arrow-left"></i> 返回任务列表
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-download"></i> 导出任务
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- 导出说明 -->
            <div class="card mt-4">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0"><i class="bi bi-info-circle"></i> 导出格式说明</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="card h-100">
                                <div class="card-body">
                                    <h5 class="card-title"><i class="bi bi-filetype-csv"></i> CSV 格式</h5>
                                    <p class="card-text">CSV（逗号分隔值）是一种简单的文件格式，用于存储表格数据。</p>
                                    <ul>
                                        <li>可以用Excel、Google表格等打开</li>
                                        <li>适合数据分析和处理</li>
                                        <li>文件体积小，适合大量数据</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card h-100">
                                <div class="card-body">
                                    <h5 class="card-title"><i class="bi bi-file-earmark-excel"></i> Excel 格式</h5>
                                    <p class="card-text">Excel格式提供更好的格式化和视觉效果。</p>
                                    <ul>
                                        <li>直接在Microsoft Excel中打开</li>
                                        <li>保留表格格式和样式</li>
                                        <li>适合报表和数据展示</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card h-100">
                                <div class="card-body">
                                    <h5 class="card-title"><i class="bi bi-file-earmark-pdf"></i> PDF 格式</h5>
                                    <p class="card-text">PDF格式提供最佳的打印和跨平台兼容性。</p>
                                    <ul>
                                        <li>在任何设备上保持一致的外观</li>
                                        <li>适合打印和分享</li>
                                        <li>不易被修改，适合正式报告</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}